<template>
    <div class="app-container" style="padding: 0;">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="参与单位" prop="careerTitle">
                <el-input v-model="queryParams.compName" placeholder="请输入参与单位" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['system:careerFair:add']">添加</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                    @click="handleDelete" v-hasPermi="['system:careerFair:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['system:careerFair:export']">导出</el-button>
            </el-col>
            <div>共计有: {{ careerSingleData.comNum || 0 }}个单位, {{ careerSingleData.stationNum || 0 }}个岗位,
                投递简历{{ careerSingleData.handResume || 0 }}份, {{ careerSingleData.pageviews || 0 }}人浏览, {{ compAreaNum }}
            </div>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="joinCompanyList" @selection-change="handleSelectionChange" height="500px">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="招聘单位" align="center" prop="compName" />
            <el-table-column label="招聘人数" align="center" prop="careerRecruits" />
            <el-table-column label="浏览用户" align="center" prop="careerPageviews" />
            <el-table-column label="投递简历" align="center" prop="handResume" />
            <el-table-column label="关注人数" align="center" prop="followNum" />
            <el-table-column label="联系人数" align="center" prop="relateNum" />
            <el-table-column label="审核状态" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <span v-if="scope.row.ifVerify === 0" style="color: #E6A23C;">待审核</span>
                    <span v-if="scope.row.ifVerify === 1" style="color: #67C23A;">通过</span>
                    <span v-if="scope.row.ifVerify === 2" style="color: #F56C6C">未通过</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.ifVerify !== 1" size="mini" type="text" @click="handleExamine(scope.row)"
                        v-hasPermi="['system:careerFair:edit']">审核</el-button>
                    <!-- <el-button size="mini" type="text" @click="handleDetail(scope.row)"
                        v-hasPermi="['system:careerFair:edit']">详情</el-button> -->
                    <el-button size="mini" type="text" @click="handleManage(scope.row)"
                        v-hasPermi="['system:careerFair:edit']">岗位管理</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" /> -->

        <!-- 添加或修改招聘会管理对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="招聘标题">
                    <!-- <el-select  placeholder="请选择招聘会" @change="handleChangeCompany">
                        <el-option v-for="item in careerFairList" :key="item.id" :label="item.careerTitle" :value="item.id">
                        </el-option>
                    </el-select> -->
                    <el-input v-model="careerFairTitle" disabled placeholder="请输入招聘标题" />
                </el-form-item>

                <el-form-item label="参加单位与岗位">
                    <el-table :data="companyCareerFairList" style="width: 100%" max-height="250">
                        <el-table-column label="单位名称" class="room-date">
                            <template #default="scope">
                                <el-form-item>
                                    <el-select v-model="scope.row.compId" filterable clearable :disabled="isEdit" placeholder="请选择单位名称"
                                        @change="handleChangeCompany">
                                        <el-option v-for="item in companyList" :key="item.id" :label="item.compName"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="岗位名称">
                            <template #default="scope">
                                <el-form-item>
                                    <el-select v-model="scope.row.stationIds" multiple filterable allow-create
                                        placeholder="请选择岗位名称">
                                        <el-option v-for="item in stationList" :key="item.id" :label="item.stationName"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" v-if="!isEdit">
                            <template #default="scope">
                                <el-button type="success" size="mini" plain @click="handldeAddComp">新增</el-button>
                                <el-button v-if="companyCareerFairList.length > 1" type="danger" size="mini" plain
                                    @click="handleDelComp(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 审核弹窗 -->
        <el-dialog title="参会单位审核" :visible.sync="examineFlag" width="50%" append-to-body>
            <div class="info-item">申请参与招聘会: {{ careerFairTitle }}</div>
            <div class="info-item">申请单位: {{ compCurrentName }}</div>
            <el-table v-loading="examineDialogLoading" :data="detailTableData" height="300px">
                <el-table-column label="招聘单位" align="center" prop="stationName" />
                <el-table-column label="招聘人数" align="center" prop="recruitsNumber" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <!-- <el-button size="mini" type="text" v-hasPermi="['system:careerFair:edit']">详情</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer" v-if="detailTableData.length">
                <el-button type="primary" @click="handleExamineSubmit(1)">审核通过</el-button>
                <el-button @click="handleExamineSubmit(2)">审核不通过</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listStation } from "@/api/system/station";
import { listCompany, exportCompany } from "@/api/system/company";
import { getCareerFair, listCareerFair, delCareerCompanyFair, addCareerFair, updateCareerFairPost, addCareerFairPost, examinePost, careerCountById } from "@/api/system/careerFair";

export default {
    name: "joinCompany",
    props: {
        careerId: {
            type: Number,
            required: true
        },
        careerFairTitle: {
            type: String,
            required: true
        },
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            examineFlag: false,
            examineDialogLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            isEdit: false,
            // 总条数
            total: 0,
            // 招聘会管理表格数据
            joinCompanyList: [],
            careerFairList: [],
            companyList: [],
            stationList: [],
            detailTableData: [],
            careerSingleData: {},
            companyCareerFairList: [{
                id: this.careerId,
                compId: '',
                stationIds: []
            },],
            // 弹出层标题
            title: "",
            compCurrentName: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                careerId: '',
                compName: '',

            },
            selectCompList: [],

            // 表单参数
            form: {},
            examineParams: {
                careerId: '',
                compId: '',
                ifVerify: ''
            },
            // 表单校验
            rules: {
                careerTitle: [
                    { required: true, message: "招聘标题不能为空", trigger: "blur" }
                ],

            },
            compAreaNum: ''
        };
    },
    created() {
        this.getList();
        this.getCompList();
        this.getCareerCountById();
        // this.getCareerFairList()
    },
    methods: {
        /** 查询参与单位列表 */
        getList() {
            this.loading = true;
            getCareerFair(String(this.careerId)).then(response => {
                this.joinCompanyList = response.data.companyInfos;
                this.compAreaNum = response.data.compAreaNum
                this.loading = false;
            });
        },
        // /** 查询招聘会管理列表 */
        // getCareerFairList() {
        //     listCareerFair({
        //         pageNum: 1,
        //         pageSize: 999
        //     }).then(response => {
        //         this.careerFairList = response.rows;
        //     });
        // },
        /** 查询人才招聘公司信息列表 */
        getCompList() {
            listCompany({
                pageNum: 1,
                pageSize: 999
            }).then(response => {
                this.companyList = response.rows;
            });
        },
        /** 查询公司岗位信息列表 */
        getStationList(id) {
            listStation({
                pageNum: 1,
                pageSize: 999,
                compId: id,
            }).then(response => {
                this.stationList = response.rows;
            });
        },
        getCareerCountById() {
            careerCountById(String(this.careerId)).then(res => {
                this.careerSingleData = res.data
            })
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                careerTitle: null,

            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
            this.getCareerCountById()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        // 公司表单多选中数据
        handleSelectComp(selection) {
            this.selectCompList = selection
            console.log(this.selectCompList, 'selection')
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.isEdit = false;
            this.title = "添加参会单位和岗位";
        },
        /** 详情 */
        handleDetail(row) {
            // this.reset();
            this.open = true;
        },
        // 审核
        handleExamine(row) {
            console.log(row, 6666)
            this.examineFlag = true
            this.compCurrentName = row.compName
            this.examineParams.compId = row.id
            this.examineParams.careerId = row.careerId
            this.detailTableData = row.companyStations
        },
        // 岗位管理
        handleManage(row) {
            this.open = true
            this.isEdit = true
            this.title = "编辑参会单位和岗位";
            this.getStationList(row.id);

            this.companyCareerFairList = [{
                id: row.careerId,
                compId: row.id,
                stationIds: row.companyStations.map(item => item.id)
            }]
            console.log(row, this.companyCareerFairList, this.stationList, 'handleManage')
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            // console.log(row, 'rowwww')
            // const ids = row.id || this.ids;
            const _this = this
            this.$modal.confirm('是否确认删除？').then(function () {
                return delCareerCompanyFair(_this.careerId, _this.ids);
            }).then(() => {
                this.getList();
                this.getCareerCountById()
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/careerFair/exportByCompany', {
                ...this.queryParams
            }, `careerFair_company_${new Date().getTime()}.xlsx`)
        },
        // 管理岗位弹窗逻辑
        handleChangeCompany(val) {
            console.log(val, 'valll')
            this.stationList = []
            this.getStationList(val);
        },
        handldeAddComp() {
            this.companyCareerFairList.push({
                id: this.careerId,
                compId: '',
                stationIds: []
            })
        },
        handleDelComp(index) {
            this.companyCareerFairList.splice(index, 1)
        },
        // 确认
        handleSubmit() {
            const requestApi = this.isEdit ? updateCareerFairPost : addCareerFairPost
            requestApi(this.companyCareerFairList).then(res => {
                this.$modal.msgSuccess("操作成功");
                this.open = false;
                this.getList();
                this.getCareerCountById()
            })
        },

        // 审核弹窗逻辑
        handleExamineSubmit(type) {
            this.examineParams.ifVerify = type
            examinePost(this.examineParams).then(res => {
                this.$modal.msgSuccess("操作成功");
                this.examineFlag = false;
                this.getList()
                this.getCareerCountById()
            })
        },
    }
};
</script>
<style>
.info-item {
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 16px;
    color: #333;
}
</style>